<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px" @close="onCancel">
			<OrderAfterRecords ref="orderAfterRecordsRef" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref } from 'vue';

const OrderAfterRecords = defineAsyncComponent(() => import('../orderAfterRecords.vue'));

const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
});
const orderAfterRecordsRef = ref();

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	orderAfterRecordsRef.value.onCancel();
	state.dialog.isShowDialog = false;
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.order_after_no}」售后记录`;
	setTimeout(() => {
		orderAfterRecordsRef.value.openDialog(row);
	}, 1000);
};

/********** 网络请求 **********/

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
